<template>
  <div class="content_box" v-loading="loading">
    <p class="head_title">退费管理</p>
    <div class="box1">
      <p class="bk_bj_on" v-if="bailInfo.status == 6"></p>
      <p class="bk_bj" v-else></p>
      <div class="nr">

        <img class="mc" v-if="bailInfo.status == 6" src="@/assets/mc1.png" alt="" />
        <img class="mc" v-else src="@/assets/mc.png" alt="">

        <!-- 缴费步骤 -->
        <div class="top_box">
          <div class="top_msg">
            <img class="left-icon" v-if="bailInfo.status == 6" src="@/assets/icon1_1.png" alt="" />
            <img class="left-icon" v-else src="@/assets/icon1.png" alt="">

            <div class="bz_msg">
              <div class="bz">
                <div class="on">
                  <img class="icon" src="@/assets/icon2.png" alt="" />
                  <p class="text">提交申请</p>
                  <img class="line" src="@/assets/icon5_hover.png" alt="" />
                </div>
                <div :class="bailInfo.status != 2 ? 'on' : ''">
                  <img v-if="bailInfo.status != 2" class="icon" src="@/assets/icon2.png" alt="" />
                  <img v-else class="icon" src="@/assets/icon3.png" alt="" />
                  <p class="text">审核中</p>
                  <img v-if="bailInfo.status != 2" class="line" src="@/assets/icon5_hover.png" alt="" />
                  <img v-else class="line" src="@/assets/icon5.png" alt="" />
                </div>
                <div v-if="bailInfo.status == 7" class="on">
                  <img class="icon" src="@/assets/icon4_hover.png" alt="" />
                  <p class="text">退款成功</p>
                </div>
                <div v-else-if="bailInfo.status == 6" class="on1">
                  <img class="icon" src="@/assets/icon4_close.png" alt="" />
                  <p class="text">退款失败</p>
                </div>
                <div v-else>
                  <img class="icon" src="@/assets/icon4.png" alt="" />
                  <p class="text">退款成功</p>
                </div>
              </div>

              <p class="name" v-if="bailInfo.status == 2">待发起审批</p>
              <p class="name" v-else-if="bailInfo.status == 3">审批中</p>
              <p class="name" v-else-if="bailInfo.status == 4">待付款</p>
              <p class="name" v-else-if="bailInfo.status == 5">银行处理中</p>
              <p class="name" v-else-if="bailInfo.status == 6">退款失败</p>
              <p class="name" v-else-if="bailInfo.status == 7">已完成</p>

              <div class="price_box">
                <div class="price">
                  退款金额：<p>{{ bailInfo.amount_alias }}</p>
                </div>

              </div>

              <!-- <div class="label">
                <p class="on1">取保中</p>
                <p class="on2">逾期2天</p>
              </div> -->
            </div>
          </div>
          <div class="ewm">
            <div v-for="(item, index) in buttonList" :key="index">
              <!-- <p class="an" @click="scanEwmClick">同意审批</p> -->
              <p v-if="item.vaule == 'spth'" class="an" @click="returnBh">审核驳回</p>
              <p v-if="item.vaule == 'spty'" class="an" @click="scanEwmClick">同意审批</p>
              <p v-if="item.vaule == 'qrfk'" class="an" @click="confirmPay">{{ item.name }}</p>
            </div>
          </div>
        </div>

        <!-- 案件信息 -->
        <div class="xinxi_box" v-if="bailInfo.bail">
          <p class="title_box">案件信息</p>
          <div class="box">
            <p class="title">案件编号</p>
            <p class="text">{{ bailInfo.bail.case_code }}</p>
            <!-- <p class="label">多个10人 </p> -->
          </div>
          <div class="box">
            <p class="title">案件名称</p>
            <p class="text">{{ bailInfo.bail.case_title }}</p>
          </div>
          <div class="box">
            <p class="title">办案单位</p>
            <p class="text">{{ bailInfo.department.name }}</p>
          </div>
          <div class="box">
            <p class="title">执行机构</p>
            <p class="text">重庆市江津区字市派出所</p>
          </div>
          <div class="box">
            <p class="title">办案人员</p>
            <p class="text">{{ bailInfo.baar_xm }}</p>
            <p class="label1">警员</p>
          </div>
          <div class="box">
            <p class="title">办案人员手机号</p>
            <p class="text">{{ bailInfo.bamj_mobile }}</p>
          </div>
        </div>

        <!-- 基本情况 -->
        <div class="xinxi_box" v-if="bailInfo.bail">
          <p class="title_box">基本情况</p>
          <div class="box">
            <p class="title">嫌疑人</p>
            <p class="text">{{ bailInfo.bail.crime_name }}</p>
          </div>
          <div class="box">
            <p class="title">身份证号</p>
            <p class="text">{{ bailInfo.bail.crime_idcard }}</p>
          </div>
          <div class="box">
            <p class="title">出生日期</p>
            <p class="text">1976-05-11</p>
          </div>
          <div class="box">
            <p class="title">家庭住址</p>
            <p class="text" style="flex:1">{{ bailInfo.bail.crime_address }}</p>
          </div>
        </div>

        <p class="hx_line"></p>

        <!-- 日期 -->
        <div class="xinxi_box" v-if="bailInfo.bail">
          <p class="title_box">日期</p>
          <div class="box">
            <p class="title">起算日期</p>
            <p class="text">{{ bailInfo.bail.start_date }}</p>
          </div>
          <div class="box">
            <p class="title">解除日期</p>
            <p class="text">{{ bailInfo.bail.end_date }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 退款记录 -->
    <div style="background: #fff;border-radius: 8px;">
      <div class="box2">
        <div class="xinxi_box">
          <p class="title_box"><span class="line"></span>退款记录 <span>退款金额{{ bailInfo.amount_alias }}元（剩余可退保证金{{ bailInfo.amount_alias }}元）</span></p>

          <div class="bank_msg" v-if="historyList && historyList.length">
            <div class="head">
              <p>退款金额</p>
              <p>收款人</p>
              <p>联系手机</p>
              <p>收款人身份证号</p>
              <p style="width: 25%;">开户银行</p>
              <p style="width: 16%;">时间</p>
              <p>退款状态</p>
            </div>
            <div class="c_ont" v-for="(item,index) in historyList" :key="index">
              <p>{{ bailInfo.amount_alias }}</p>
              <p>{{item.card_name}}</p>
              <p>{{item.crime_mobile}}</p>
              <p>--</p>
              <p style="width: 25%;">{{item.bank_name}}</p>
              <p style="width: 16%;">{{item.createtime}}</p>
              <p>--</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 退还保证金决定书 -->
      <div class="box3" v-if="jdFileArr.length">
        <div class="xinxi_box">
          <p class="title_box_t">退还保证金决定书</p>
          <div class="msg msg_on">

            <div v-for="(item, index) in jdFileArr" :key="index">
              <div class="img" v-if="item.imagetype == 'pdf'">
                <svg-icon name="pdf" color="red" width="80px" height="100px"></svg-icon>
                <p>查看</p>
              </div>

              <div class="img" v-if="item.imagetype == 'png'">
                <el-image style="width: 80px; height: 100px;border-radius: 6px;" :src="item.url_new"
                  :preview-src-list="[item.url_new]" />
                <p>查看</p>
              </div>
              <div class="up_msg">
                <p class="name">{{ item.filename }}</p>
                <p class="text" v-if="process3 && process3.wsbh">{{process3.wsbh}}</p>
                <p class="text1" v-else>--</p>
                <p class="time">{{ item.uploadtime_text }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 退还保证金通知书 -->
      <div class="box3" v-if="tzFileArr.length">
        <div class="xinxi_box">
          <p class="title_box_t">退还保证金通知书</p>
          <div class="msg msg_on">

            <div v-for="(item, index) in tzFileArr" :key="index">
              <div class="img" v-if="item.imagetype == 'pdf'">
                <svg-icon name="pdf" color="red" width="80px" height="100px"></svg-icon>
                <p>查看</p>
              </div>

              <div class="img" v-if="item.imagetype == 'png'">
                <el-image style="width: 80px; height: 100px;border-radius: 6px;" :src="item.url_new"
                  :preview-src-list="[item.url_new]" />
                <p>查看</p>
              </div>
              <div class="up_msg">
                <p class="name">{{ item.filename }}</p>
                <p class="text" v-if="process3 && process3.wsbh">{{process3.wsbh}}</p>
                <p class="text1" v-else>--</p>
                <p class="time">{{ item.uploadtime_text }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 作证材料 -->
      <div class="box3" v-if="zzclList.length">
        <div class="xinxi_box">
          <p class="title_box_t">作证材料</p>
          <div class="msg">
            <div v-for="(item, index) in zzclList" :key="index">
              <div class="img" v-if="item.imagetype == 'pdf'">
                <svg-icon name="pdf" color="red" width="100px" height="120px"></svg-icon>
                <p @click="del(index)"><el-icon size="18">
                    <Delete />
                  </el-icon></p>
              </div>

              <div class="img" v-if="item.imagetype == 'png'">
                <el-image style="width: 120px; height: 146px;border-radius: 6px;" :src="item.url_new"
                  :preview-src-list="[item.url_new]" />
                <!-- <p @click="del(index)"><el-icon size="18"><Delete /></el-icon></p> -->
              </div>
              <!-- <div class="up_msg">
                <p class="name">{{item.filename}}</p>
                <p class="time">{{item.uploadtime_text}}</p>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>

    

    

    <div class="new_box">
      <p class="title_box" style="margin-bottom:0">审批流程</p>
      <div class="box" v-for="(item, index) in processList" :key="index">
        <div class="nr" v-for="(child, i) in item" :key="i">
          <div class="b_flex">
            <!-- v-if="child.examine_status != 0" -->
            <p class="time">{{ child.updatetime }}</p>
            <div class="line_box">
              <div>
                <p class="mj_on"></p>
              </div>
              <p class="line"></p>
            </div>
            <div class="msg">
              <div v-if="child.examine_status == 0">
                <p class="name">{{ child.job.name }}</p>
                <p class="text">已发起</p>
              </div>
              <div v-if="child.examine_status == 1">
                <p class="name">{{ child.job.name }}</p>
                <p class="text">{{ child.examine_status_text }}</p>
              </div>
              <div v-if="child.examine_status == 2">
                <p class="name">{{ child.job.name }}</p>
                <p class="text">{{ child.examine_notes }}</p>
              </div>
              <!-- <p class="name" >{{child.job.name}}已处理</p>
                <p class="name">{{child.admin_name}}驳回</p> -->
              <!-- <p class="text">缴费金额：¥2,000.00</p> -->
            </div>
          </div>
          <p class="user">{{ child.admin_name }}</p>
        </div>
      </div>
    </div>

    <div class="new_box" v-if="tkMsg && tkMsg.account_type">
      <p class="title_box">退款方式</p>

      <div class="radio1">
        <div>
          <p class="quan on"><span></span></p>
          <span v-if="tkMsg.account_type == 'refund'">原路退款</span>
          <span v-if="tkMsg.account_type == 'personal'">当事人预留银行卡</span>
          <span v-if="tkMsg.account_type == 'public'">退款对公账户</span>
        </div>
      </div>
      <div class="list">
        <div>
          <p>收款单位：</p>
          <p>{{ tkMsg.card_name }}</p>
        </div>
        <div>
          <p>银行卡卡号：</p>
          <p>{{ tkMsg.card_number }}</p>
        </div>
      </div>
    </div>

    <!-- 缴费记录 -->
    <div style="background: #fff;border-radius: 8px;">
      <div class="box2">
        <div class="xinxi_box">
          <p class="title_box"><span class="line"></span>缴费记录 <span>缴费金额{{ bailInfo.amount_alias }}元</span></p>

          <div class="bank_msg">
            <div class="head">
              <p>缴费金额</p>
              <p>嫌疑人</p>
              <p>联系手机</p>
              <p style="width: 15%;">身份证号</p>
              <p>缴费状态</p>
              <p style="width: 26%;">办案单位</p>
              <p>更多</p>
            </div>
            <div class="c_ont c_ont1">
              <p>{{ bailInfo.amount_alias }}</p>
              <p v-if="bailInfo.bail">{{ bailInfo.bail.crime_name }}</p>
              <p>--</p>
              <p v-if="bailInfo.bail" style="width: 15%;">{{ bailInfo.bail.crime_idcard }}</p>

              <p v-if="bailInfo.status == 2">待发起审批</p>
              <p v-else-if="bailInfo.status == 3">审批中</p>
              <p v-else-if="bailInfo.status == 4">待付款</p>
              <p v-else-if="bailInfo.status == 5">银行处理中</p>
              <p v-else-if="bailInfo.status == 6">退款失败</p>
              <p v-else-if="bailInfo.status == 7">已完成</p>

              <p v-if="bailInfo.department" style="width: 26%;">{{ bailInfo.department.name }}</p>
              <el-button type="primary" @click="seepz">查看凭证</el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 收取保证金决定书 -->
      <div class="box3" v-if="qbhsjdList.length">
        <div class="xinxi_box">
          <p class="title_box_t">收取保证金决定书</p>
          <div class="msg msg_on">

            <div v-for="(item, index) in qbhsjdList" :key="index">
              <div class="img" v-if="item.imagetype == 'pdf'">
                <svg-icon name="pdf" color="red" width="80px" height="100px"></svg-icon>
                <p>查看</p>
              </div>

              <div class="img" v-if="item.imagetype == 'png'">
                <el-image style="width: 80px; height: 100px;border-radius: 6px;" :src="item.url_new"
                  :preview-src-list="[item.url_new]" />
                <p>查看</p>
              </div>
              <div class="up_msg">
                <p class="name">{{ item.filename }}</p>
                <p class="text" v-if="process1 && process1.wsbh">{{process1.wsbh}}</p>
                <p class="text1" v-else>--</p>
                <p class="time">{{ item.uploadtime_text }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 收取保证金通知书 -->
      <div class="box3" v-if="qbhstzList.length">
        <div class="xinxi_box">
          <p class="title_box_t">收取保证金通知书</p>
          <div class="msg msg_on">

            <div v-for="(item, index) in qbhstzList" :key="index">
              <div class="img" v-if="item.imagetype == 'pdf'">
                <svg-icon name="pdf" color="red" width="80px" height="100px"></svg-icon>
                <p>查看</p>
              </div>

              <div class="img" v-if="item.imagetype == 'png'">
                <el-image style="width: 80px; height: 100px;border-radius: 6px;" :src="item.url_new"
                  :preview-src-list="[item.url_new]" />
                <p>查看</p>
              </div>
              <div class="up_msg">
                <p class="name">{{ item.filename }}</p>
                <p class="text" v-if="process1 && process1.wsbh">{{process1.wsbh}}</p>
                <p class="text1" v-else>--</p>
                <p class="time">{{ item.uploadtime_text }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    

    

    


    <div class="new_box">
      <p class="title_box" style="margin-bottom:10px">预留银行卡信息</p>

      <div class="list1">
        <div class="box_b">
          <p class="title">姓名</p>
          <p class="text">{{ bankMsg.card_name }}</p>
        </div>
        <div class="box_b">
          <p class="title">关系</p>
          <p class="text" v-if="bankMsg.relation_ships">{{ bankMsg.relation_ships.name }}</p>
        </div>
        <div class="box_b">
          <p class="title">银行卡卡号</p>
          <p class="text">{{ bankMsg.card_number }}</p>
        </div>
        <div class="box_b">
          <p class="title">银行名称</p>
          <p class="text">{{ bankMsg.bank_name }}</p>
        </div>
      </div>
    </div>

    <!-- 日志 -->
    <div class="box5">
      <p class="title_box">日志</p>
      <!-- 操作日志 -->
      <div class="list">

        <div class="box" v-for="(item, index) in operateLogArr" :key="index">
          <div class="b_flex">
            <div class="line_box">
              <p class="mj_on"><span></span></p>
              <p class="line"></p>
            </div>
            <div class="time">{{ item.createtime }}</div>
          </div>
          <div class="msg">
            <p class="title">{{ item.msg }}</p>
            <p class="text" v-if="item.type == 25">退款金额：{{ bailInfo.amount_alias }}</p>
            <p class="text" v-if="item.type == 13">退款金额：{{ bailInfo.amount_alias }}</p>

            <p class="text" v-if="item.type == 41 && item.origin_data.crime_name">姓名：{{ item.origin_data.crime_name }}</p>
            <p class="text" v-if="item.type == 41 && item.origin_data.crime_name">预留银行卡：{{ item.origin_data.card_number }}
            </p>
            <p class="text" v-if="item.type == 41 && item.origin_data.crime_name">银行名称：{{ item.origin_data.bank_name }}</p>
          </div>
        </div>
      </div>

    </div>


    <!-- 驳回 -->
    <el-dialog v-if="returnVisible" title="" v-model="returnVisible">
      <return-pop @closeDrawer="closepz" :bailId="bailInfo.bail_id" :processId="bailInfo.id"></return-pop>
    </el-dialog>

    <!-- 凭证 -->
    <el-dialog v-if="ewmVisible" title="" v-model="ewmVisible" width="1150">
      <scan-ewm :isButton="isButton" :isFq="false" @closeDrawer="closepz" :bailId="bailInfo.bail_id" :processId="bailInfo.id"></scan-ewm>
    </el-dialog>


    <!-- 完善办案日期 -->
    <el-dialog :show-close="false" v-model="updateDateShow">
      <update-bail-date :id="id" @closeDrawer="closeDrawer" />
    </el-dialog>

    <!-- 案件延期申请 -->
    <el-dialog :show-close="false" v-model="updateDelayShow">
      <update-bail-delay :bailId="bailId" :id="id" @closeDrawer="closeDrawer" />
    </el-dialog>

    <!-- 修改办案预留银行卡 -->
    <el-dialog v-model="updateBankShow" :show-close="false">
      <update-bank :bailId="bailId" :id="id" @closeDrawer="closeDrawer" />
    </el-dialog>

    <!-- 委托协办单位 -->
    <el-dialog v-model="updateEntrustShow" :show-close="false">
      <update-entrust :bailId="bailId" :id="id" @closeDrawer="closeDrawer" />
    </el-dialog>

    <!-- 修改办案人 -->
    <el-dialog v-model="updatePoliceShow" :show-close="false">
      <update-police :bailId="bailId" :id="id" @closeDrawer="closeDrawer" />
    </el-dialog>

    <!-- 修改办案单位 -->
    <el-dialog v-model="updateUnitShow" :show-close="false">
      <update-unit :bailId="bailId" :id="id" @closeDrawer="closeDrawer" />
    </el-dialog>

    <!-- 完善当事人信息 -->
    <el-dialog v-model="updateUser" :show-close="false">
      <update-user :bailId="bailId" :id="id" @closeDrawer="closeDrawer" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, ref, computed, onMounted } from "vue";
import { defineProps, defineEmits } from "vue";
import { useRoute } from "vue-router";
import { getBindAtt } from "@/api/public";
import { revokeQrcode, closeBail, getPlayMore, qrcodeView, getQrCode, getBailInfo, getYlBank, getOperateLog, addJkb } from "@/api/bond/pay";
import ScanEwm from "./components/ScanEwm.vue";
import ReturnPop from "./components/ReturnPop.vue";
import UpdateBailDate from "./components/UpdateBailDate.vue";
import UpdateBailDelay from "./components/UpdateBailDelay.vue";
import UpdateBank from "./components/UpdateBank.vue";
import UpdateEntrust from "./components/UpdateEntrust.vue";
import UpdatePolice from "./components/UpdatePolice.vue";
import UpdateUnit from "./components/UpdateUnit.vue";
import UpdateUser from "./components/UpdateUser.vue";
import { ElLoading } from 'element-plus'
import { ElNotification, ElMessageBox } from 'element-plus'
import { formattedDate } from "@/utils/utils";

import { get_case_log, confirmPayment, getButton, getHistoryRecord, getBailAttCategory, getProcessFlow, getTkBank } from "@/api/bond/refund";
const route = useRoute();
const props = defineProps({
  mdl: {
    type: Object,
    required: true,
  },
  handleCloseDrawer: {
    type: Function,
    required: true,
  },
});

const id = computed(() => route.params.id); // 获取路由参数中的id

let activeName = ref("first");


onMounted(() => {
  getMsg();
});

// 获取案件详情-银行卡
let loading = ref(true)

let bailInfo = ref({});
let bankMsg = ref({});
let operateLogArr = ref([])
let processList = ref([])
let tkMsg = ref({})

let buttonList = ref([])


let tzFileArr = ref([]);
let jdFileArr = ref([]);
let zzclList = ref([])// 佐证材料
let qbhstzList = ref([])// 取保候审通知
let qbhsjdList = ref([])// 收取保证金决定书
let jdShow = ref(false)
let tzShow = ref(false)

let jfjdShow = ref(false)
let jftzShow = ref(false)
let historyList = ref([])

let process1 = ref({})
let process3 = ref({})
const getMsg = async () => {
  loading.value = true
  // 基本信息
  await getBailInfo({ process_id: id.value }).then((res) => {
    if (res.code == 1) {
      bailInfo.value = res.data;
      if(res.data.process && res.data.process.length){
        res.data.process.map((item:any)=>{
          if(item.step == 1){// 缴费
            process1.value = item
          }

          if(item.step == 3){// 退款
            process3.value = item
          }
        })
      }
    }
  });

  let data = {
    bail_id: bailInfo.value.bail_id,
    process_id: id.value
  }
  await getHistoryRecord(data).then(res => {
    if (res.code == 1) {
      if (res.data && res.data.length) {
        res.data.map((item: { createtime: string; })=>{
          item.createtime = formattedDate(item.createtime)
        })
        historyList.value = res.data
      } else {
        historyList.value = []
      }
    }
  })

  // 预留银行卡
  if (bailInfo.value.bail_id) {
    await getYlBank({ bail_id: bailInfo.value.bail_id }).then((res) => {
      if (res.code == 1) {
        bankMsg.value = res.data;
      }
    });
  }

  // 退款方式
  await getTkBank(data).then(res => {
    if (res.code == 1) {
      tkMsg.value = res.data.public_bank
    }
  })

  // 获取案件文书附件类别
  await getBailAttCategory(data).then(res => {
    if (res.code == 1) {
      res.data.map(async (item: { vaule: any; }) => {
        await getBindAtt({ bail_id: bailInfo.value.bail_id, group_id: item.vaule }).then(
          (res) => {
            if (res.code == 1) {
              res.data.map((item: { url_new: any; url: any; }) => {
                item.url_new = import.meta.env.VITE_APP_file_API + item.url
              })
              if (item.vaule == 1) {// 佐证材料
                zzclList.value = res.data
              }
              if (item.vaule == 2) {// 收取保证金决定书
                qbhsjdList.value = res.data
                jfjdShow.value = true
              }
              if (item.vaule == 3) {// 收取保证金通知书
                qbhstzList.value = res.data
                jftzShow.value = true
              }
              if (item.vaule == 4) {// 退还保证金决定书
                jdFileArr.value = res.data
                jdShow.value = true
              }
              if (item.vaule == 5) {// 退还保证金通知书
                tzFileArr.value = res.data
                tzShow.value = true
              }
              loading.value = false
            }
          }
        );
      })
    }
  })

  await getProcessFlow(data).then(res => {
    if (res.code == 1) {
      let arr: { group_id: number; }[] = []
      let arr1: { group_id: number; }[] = []
      let arr2: { group_id: number; }[] = []
      res.data.map((item: { group_id: number; }) => {
        item.updatetime = formattedDate(item.updatetime)
        if (item.group_id == 1) {
          arr.push(item)
        }
        if (item.group_id == 2) {
          arr1.push(item)
        }
        if (item.group_id == 3) {
          arr2.push(item)
        }
      })
      processList.value.push(arr)
      processList.value.push(arr1)
      processList.value.push(arr2)

      processList.value = processList.value.filter(item => Array.isArray(item) && item.length > 0);
      console.log(processList.value)

    }
  })

  // 操作日志
  await get_case_log({ bail_id: bailInfo.value.bail_id }).then(res => {
    if (res.code == 1) {
      operateLogArr.value = res.data
      console.log(operateLogArr.value)
    }
  })

  // 获取按钮权限
  await getButton(data).then(res => {
    if (res.code == 1) {
      buttonList.value = res.data
    }
  })
};

// 同意付款
const confirmPay = () => {
  ElMessageBox.confirm(
    '确定付款?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      loading.value = true
      let data = {
        bail_id: bailInfo.value.bail_id,
        process_id: id.value
      }
      confirmPayment(data).then(res => {
        if (res.code == 1) {
          ElNotification({ message: res.msg, type: "success" });
          loading.value = false
          getMsg()
        } else {
          ElNotification.error(res.msg);
          loading.value = false
        }
      })
    })
    .catch(() => {
    })
}

// 文件预览
const filePreview = (url: string | URL | undefined) => {
  window.open(url);
}

// 扫码缴费
let ewmVisible = ref(false)
const scanEwmClick = async () => {

  ewmVisible.value = true
  isButton.value = true
}

let isButton = ref(true)
const seepz=()=>{
  ewmVisible.value = true
  isButton.value = false
}

// 更多按钮-操作
let anniuStatus = ref({})// 按钮对象
const openButton = async (id: any) => {
  getPlayMore({ process_id: id }).then(res => {
    if (res.code == 1) {
      anniuStatus.value = res.data
    }
  })
}

// 关闭凭证弹窗
const closepz = (e: any) => {
  ewmVisible.value = false
  returnVisible.value = false
  if(e){
    getMsg();
  }
}


// 关闭弹窗
const closeDrawer = () => {
  updateDateShow.value = false
  updateDelayShow.value = false
  updateBankShow.value = false
  updateEntrustShow.value = false
  updatePoliceShow.value = false
  updateUnitShow.value = false
  updateUser.value = false
}

// 按钮点击
let bailId = ref(0) // 案件id
let updateDateShow = ref(false) // 完善办案日期弹窗
let updateDelayShow = ref(false) // 案件延期申请弹窗
let updateBankShow = ref(false) // 修改办案预留银行卡
let updateEntrustShow = ref(false) // 委托协办单位
let updatePoliceShow = ref(false) // 修改办案人
let updateUnitShow = ref(false) // 修改办案单位
let updateUser = ref(false) // 完善当事人信息

const downClick = (num: number, aId: number) => {
  bailId.value = aId
  if (num == 1) { //案件延期申请
    updateDelayShow.value = true
  }
  if (num == 7) { //修改办案单位
    updateUnitShow.value = true
  }
  if (num == 4) { //修改办案日期
    updateDateShow.value = true
  }
  if (num == 5) { //委托协办单位
    updateEntrustShow.value = true
  }
  if (num == 8) { //修改办案人
    updatePoliceShow.value = true
  }
  if (num == 9) { //完善当事人信息
    updateUser.value = true
  }
  if (num == 6) { //修改办案预留银行卡
    updateBankShow.value = true
  }
  if (num == 3) {// 关闭本案
    ElMessageBox.confirm(
      '确定要关闭本案?',
      '提示',
      {
        confirmButtonText: '确认关闭',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        closeBail({ bail_id: id.value }).then(res => {
          if (res.code == 1) {
            ElNotification({ message: res.msg, type: "success" });
            getMsg()
          } else {
            ElNotification.error(res.msg);
          }
        })
      })
      .catch(() => {
      })
  }

  if (num == 10) {// 撤销缴费申请
    ElMessageBox.confirm(
      '确定要撤销缴费申请?',
      '提示',
      {
        confirmButtonText: '确认撤销',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        revokeQrcode({ process_id: id.value }).then(res => {
          if (res.code == 1) {
            ElNotification({ message: res.msg, type: "success" });
            getMsg()
          } else {
            ElNotification.error(res.msg);
          }
        })
      })
      .catch(() => {
      })
  }
}

// 驳回-弹窗
let returnVisible = ref(false)
const returnBh = ()=>{
  returnVisible.value = true
}
</script>

<style lang="scss" scoped>
::v-deep .el-loading-spinner{
  top:8%;
}
.head_title {
  font-size: 18px;
  font-weight: bold;
  color: #3d3d3d;
}

.box1 {
  position: relative;
  border-radius: 8px;
  margin-top: 30px;
  height: 630px;

  .bk_bj {
    width: 100%;
    position: absolute;
    top: -10px;
    height: 400px;
    border-radius: 8px;
    background: linear-gradient(180deg, #1c55d1 0%, rgba(255, 255, 255, 0) 46%);
  }

  .bk_bj_on {
    width: 100%;
    position: absolute;
    top: -10px;
    height: 400px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ff0000 0%, rgba(255, 255, 255, 0) 46%);
  }

  .nr {
    height: 100%;
    background: #fff;
    width: 99.6%;
    position: absolute;
    top: 0;
    left: 0.2%;
    border-radius: 8px;

    .mc {
      width: 100%;
    }

    .top_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 50px;

      .ewm {
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        margin: -46px 62px 0 0;
        text-align: right;

        .an {
          border-radius: 8px;
          width: 150px;
          height: 46px;
          background: #1c55d1;
          display: flex;
          justify-content: center;
          align-items: center;
          transition: all 0.3s;
          color: #fff;
          margin-bottom: 15px;
          margin-left: 30px;

          &:hover {
            background: #4979df;
          }

          img {
            width: 49px;
            height: 49px;
          }
        }
      }
    }

    .top_msg {
      display: flex;
      align-items: center;
      margin: -20px 0 0 28px;

      .left-icon {
        width: 85px;
        height: 80.6px;
      }

      .bz_msg {
        margin-left: 34px;

        .bz {
          display: flex;
          align-items: center;

          div {
            display: flex;
            align-items: center;
          }

          .on {
            .text {
              color: #0046df;
            }
          }

          .icon {
            width: 30px;
            height: 30px;
            margin-right: 7px;
          }

          .text {
            font-size: 14px;
            color: #333333;
            margin-right: 16px;
          }

          .line {
            width: 108px;
            height: 11px;
            margin-right: 12px;
          }
        }

        .name {
          font-size: 32px;
          font-weight: 500;
          color: #333333;
          margin: 15px 0 15px 0;
        }

        .price {
          font-size: 15px;
          color: #44567c;
          display: flex;
          align-items: center;

          p {
            color: #1c55d1;
            font-size: 20px;
            font-weight: bold;
          }

          &.on {
            p {
              color: #ff1313;
            }
          }
        }

        .label {
          display: flex;
          margin-top: 10px;

          p {
            height: 20px;
            line-height: 20px;
            padding: 0 6px;
            border-radius: 3px;
            font-size: 12px;
            margin-right: 8px;

            &.on1 {
              background: #e6ecff;
              color: #1c55d1;
            }

            &.on2 {
              background: #ffeaea;
              color: #f64040;
            }
          }
        }
      }
    }

    .hx_line {
      margin: 40px 23px;
      height: 1px;
      background: #d8d8d8;
    }
  }
}

.xinxi_box {
  margin: 40px 23px 0 23px;

  .title_box {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 10px;

    span {
      font-size: 14px;
      color: #999999;
      font-weight: 400;
    }
  }

  .box {
    width: 33%;
    display: inline-flex;
    align-items: baseline;
    line-height: 40px;

    p {
      display: inline-block;
      font-size: 14px;
    }

    .title {
      color: #929292;
      margin-right: 16px;
    }

    .text {
      color: #333333;
      line-height: 26px;
    }

    .label {
      padding: 0 8px;
      height: 20px;
      line-height: 20px;
      background: #0046df;
      font-size: 12px;
      color: #fff;
      margin-left: 16px;
      border-radius: 3px;
    }

    .label1 {
      width: 30px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      border-radius: 3px;
      background: #c7d3ff;
      font-size: 12px;
      font-weight: 500;
      color: #1c55d1;
      margin-left: 6px;
    }
  }
}
.title_box_t{
  font-size:16px;
  font-weight: 400;
}
.title_box{
  .line{
    display: inline-block;
    width: 3px;
    height: 15px;
    border-radius: 5px;
    background: #1C55D1;
    margin-right:5px;
    position: relative;
    top:1px;
  }
}
.box2 {
  background: #fff;
  padding: 24px 0;
  margin-top: 20px;
  border-radius: 8px;

  .xinxi_box {
    margin-top: 0;
  }

  .bank_msg {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    margin-top: 24px;
    padding-bottom: 26px;

    .head {
      height: 53px;
      line-height: 53px;
      border-radius: 8px 8px 0px 0px;
      background: #f6f8fa;
      padding: 0 20px;

      p {
        display: inline-block;
        font-size: 14px;
        color: #333333;
        font-weight: 600;
        width: 12%;

        &:last-child {
          width: 10%;
        }
      }
    }

    .c_ont {
      padding: 0 20px;
      padding-top: 26px;

      p {
        display: inline-block;
        font-size: 14px;
        color: #333333;
        width: 12%;

        &:last-child {
          width: 10%;
        }
      }
    }

    .c_ont1 {
      p {
        width: 12%;
      }
    }
  }
}

.box3 {
  background: #fff;
  border-radius: 8px;
  .xinxi_box {
    margin-top: 0;

    .msg {
      border-radius: 4px;
      padding: 20px 0;
      padding-bottom: 20px;
      display: flex;
      flex-wrap: wrap;

      &>div {
        display: flex;
      }

      .img {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
        margin: 0 10px;

        p {
          position: absolute;
          bottom: 0;
          right: 0;
          font-size: 12px;
          width: 100%;
          height: 26px;
          background: #1F2E54;
          color: #fff;
          cursor: pointer;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .up_img {
        width: 100px;
        height: 120px;
      }

      .up_msg {
        line-height: 30px;
        text-align: left;
        margin-left: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .name {
          color: #333333;
          font-size: 15px;
          font-weight: 500;
        }

        .text {
          font-size: 14px;
          color: #0046df;
          text-decoration: underline;
          cursor: pointer;
        }

        .time {
          color: #666666;
          font-size: 14px;
        }
      }

      &.msg_on {
        display: flex;
        justify-content: space-between;

        &>div {
          width: 45%;
          background: #F8F8F8;
          border: 1px solid #E5E5E5;
          border-radius: 4px;
          padding: 20px;
        }

        .img {
          border-radius: 6px;

          p {
            width: 40px;
            height: 20px;
            border-radius: 0;
            background: rgba(0, 0, 0, 0.3);
            border-bottom-right-radius: 6px;
          }
        }
      }
    }
  }
}

.box4 {
  background: #fff;
  padding: 24px 0;
  margin-top: 20px;
  border-radius: 8px;

  .xinxi_box {
    margin-top: 0;

    .img_list {
      margin-top: 30px;

      p {
        display: inline-block;
        margin-right: 40px;
      }
    }
  }
}

.box5 {
  background: #fff;
  margin-top: 20px;
  border-radius: 8px;

  .title_box {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    border-bottom: 1px solid #D8D8D8;
    height: 75px;
    line-height: 75px;
    padding: 0 22px;
    margin-bottom: 24px;
  }

  .el-tabs__item {
    color: #999999;
    font-size: 16px;
  }

  .el-tabs__item.is-active {
    color: #1c55d1;
    font-weight: bold;
  }

  .el-tabs__active-bar {
    background-color: #1c55d1 !important;
  }

  .el-tabs__item:hover {
    color: #1c55d1;
  }

  .list {
    padding: 30px 60px;

    .box {
      display: flex;

      &:last-child {
        .line {
          display: none;
        }
      }

      .time {
        font-size: 13px;
        color: #666666;
        margin: 0 20px 0 30px;
      }

      .b_flex {
        display: flex;
      }

      .line_box {
        p {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .mj_on {
          width: 15px;
          height: 15px;
          border: 1px solid #1C55D1;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          span {
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background: #1C55D1;
          }
        }

        .xyr_on {
          color: #1c55d1;
          background: #f5f7ff;
          border: 1px solid #e4ebfd;
          text-align: center;
        }

        .mr_on {
          background: #ebedef;
          border: 1px solid #ebedef;
          color: #666666;
        }

        .line {
          width: 1px;
          height: 100px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          margin: 0 auto;
          background: #1C55D1;
        }
      }

      .msg {
        .title {
          font-size: 16px;
          font-weight: 500;
          color: #3D3D3D;
        }

        .text {
          font-size: 12px;
          color: #666666;
          margin-top: 12px;
        }
      }
    }
  }

  .bank_list {
    padding: 40px 0;

    .el-step__head.is-wait {
      color: #1c55d1;
      border-color: #1c55d1;
    }

    .el-step__icon.is-text {
      background: #1c55d1;
      width: 12px;
      height: 12px;
      top: 2px;
    }

    .el-step__line {
      background-color: #1c55d1;
    }

    .el-step__title.is-wait {
      color: #3d3d3d;
      font-size: 14px;
      font-weight: 600;
    }

    .text1 {
      color: #666666;
    }

    .text2 {
      color: #999999;
      margin: 4px 0;
    }

    .user {
      display: inline-block;
      padding: 5px 10px;
      border-radius: 4px;
      background: rgba(28, 85, 209, 0.15);
      margin-top: 6px;
      color: #1c55d1;
    }
  }

}

.price_box {
  display: flex;

  .price {}
}

.new_box {
  background: #fff;
  padding: 24px 0;
  margin-top: 20px;
  border-radius: 8px;
  padding-top: 0;

  .title_box {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    border-bottom: 1px solid #D8D8D8;
    height: 75px;
    line-height: 75px;
    padding: 0 22px;
    margin-bottom: 24px;
  }

  .box {
    border-bottom: 1px solid #D8D8D8;
    padding: 30px 0;

    &:last-child {
      border-bottom: none !important;
    }

    .nr {
      display: flex;
      justify-content: space-between;
      margin: 0 24px;

      &:last-child {
        .line {
          display: none;
        }
      }
    }

    .user {
      font-size: 12px;
      color: #666666;
      padding: 0 10px;
      height: 26px;
      line-height: 26px;
      background: rgba(28, 85, 209, 0.15);
      color: #1C55D1;
      border-radius: 4px;
    }

    .b_flex {
      display: flex;

      .time {
        width: 90px;
        font-size: 13px;
        color: #333333;
        line-height: 20px;
      }
    }

    .line_box {
      p {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      div {
        width: 15px;
        height: 15px;
        border: 1px solid #1C55D1;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        .mj_on {
          width: 11px;
          height: 11px;
          border-radius: 50%;
          background: #1C55D1;
        }
      }

      .line {
        width: 1px;
        height: 100px;
        background: #1C55D1;
        margin: 0 auto;
      }
    }

    .msg {
      margin-left: 23px;

      .name {
        font-size: 14px;
        font-weight: 600;
        color: #3d3d3d;
      }

      .text {
        font-size: 12px;
        color: #666666;
        margin-top: 12px;
      }
    }
  }

  .radio1 {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    cursor: pointer;
    margin-left: 25px;

    &>div {
      display: flex;
      align-items: center;
      margin-right: 18px;
    }

    .quan {
      width: 16px;
      height: 16px;
      border: 1px solid #D8D8D8;
      border-radius: 50%;
      margin-right: 8px;

      &.on {
        background: #1C55D1;
        border-color: #1C55D1;
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          display: inline-block;
          width: 6px;
          height: 6px;
          background: #fff;
          border-radius: 50%;
        }
      }
    }
  }

  .list {
    margin-left: 25px;

    div {
      display: flex;
      margin-top: 20px;

      p {
        font-size: 14px;
        color: #3D3D3D;

        &:first-child {
          width: 100px;
        }
      }
    }
  }

  .list1 {
    margin: 0px 20px;

    .box_b {
      display: flex;
      align-items: center;
      font-size: 15px;
      line-height: 50px;

      .title {
        color: #929292;
        width: 200px;
      }

      .text {
        color: #333333;
      }
    }
  }
}</style>
